<template>
  <div :class="className" :style="{ height, width }" />
</template>

<script>
import echarts from 'echarts';
require("echarts/theme/macarons");
import resize from './mixins/resize';
var arr = []
// function getBeforeData(n){
//   var n = n;
// 		console.log(n);//
// 		var d = new Date();
// 		var year = d.getFullYear();
// 		var mon = d.getMonth() + 1;
// 		var day = d.getDate();
// 		if(day <= n) {
// 			if(mon > 1) {
// 				mon = mon - 1;
// 			} else {
// 				year = year - 1;
// 				mon = 12;
// 			}
// 		}
// 		d.setDate(d.getDate() + n); //很重要，+n取得是前一天的时间
// 		year = d.getFullYear();
// 		mon = d.getMonth() + 1;
// 		day = d.getDate();
// 		s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);

// }
// for(let i=0;i>-7;i--){
//   arr.push(getBeforeData(i))
// }
export default{
  name:'lineChart',
  mixins:[resize],
  data(){
    return{
      chart:null,
    }
  },
  props:{
    width:{
      type:String,
      default:"100%"
    },
    height:{
      type:String,
      default:"450px"
    },
    chartData:{
      type:Object,
      require:true
    },
    yTitle:{
      type:String,
      require:true
    }
  },
  mounted(){
    //初始化只需要做一次，后续只需要使用之前的实例对象即可
    // location.reload()
    
    this.setData()
    if (location.href.indexOf("#reloaded") == -1) {
        location.href = location.href + "#reloaded";
         location.reload();
    }
    this.chart = echarts.init(this.$el);
    setTimeout(() => {
      
      this.setOption(this.chartData);
    }, 1);
    
  },
  methods:{
      getBeforeDate(n) {
      var n = n;
      // console.log(n);//
      var d = new Date();
      var year = d.getFullYear();
      var mon = d.getMonth() + 1;
      var day = d.getDate();
      if(day <= n) {
        if(mon > 1) {
          mon = mon - 1;
        } else {
          year = year - 1;
          mon = 12;
        }
      }
      d.setDate(d.getDate() - n + 1); //很重要，+n取得是前一天的时间
      year = d.getFullYear();
      mon = d.getMonth() + 1;
      day = d.getDate();
      var s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
      return s;
    },
    setData(){
      for(var i = 7; i > 0; i--) {
        arr.push(this.getBeforeDate(i));
      }
    },

    setOption({actualData,expectedData}){
      var option = {
        //标题
        title:{
          
        },
        //控制数据显示
        tooltip:{
          axisPointer:{
            type:"cross"
          },
          trigger:"axis"
        },
        //
        legend :{
          data:['预期','实际']
        },
        //x轴
        xAxis:{
          data:arr.reverse(),
          boundaryGap: false,
        },
        yAxis:{
          name:this.yTitle
        },
        grid:{
          left:40,
          right:40,
          top:40,
          bottom:40

        },
        series:[{
          name:'预期',
          type:'line',
          smooth:true,
          data:expectedData?expectedData:[0,0,0,0,0,0,0],
          lineStyle:{
            color:"hotpink"
          },
          areaStyle:{
            color:"#ccc"
          }
        },
        {
          name:'实际',
          type:'line',
          smooth:true,
          data:actualData ? actualData :[0,0,0,0,0,0,0] ,
          lineStyle:{
            color:"skyblue"
          },
          areaStyle:{
            color:"#bbb"
          }
        },
        ]
      }
      this.chart.setOption(option);
    }
  },
  watch:{
    chartData:{
      deep:true,
      handler(newVal){
        // console.log(newVal)
        this.setOption(newVal)
      }
    }
  }
}
</script>
